<template>
	<custom-nav/>
	<view class="m-top">
		<view class="flex justify-around padding-tb text-center">
			<view 
				v-for="(item,index) in tabArr" 
				:class="['tab-item',{'text-gray':index!=tabIdx}]"
				@click="onTab(index)"
			>
				{{item.title}}
			</view>
		</view>
		<view class="cake-list">
			<cake-item v-for="item in list" :gdata="item" :key="item.objectId"/>
		</view>
	</view>
	<cart-pop/>
</template>

<script setup>
import { ref } from "vue";
import { cakeGet } from "../../api/cake";
import { ID, KEY } from "../../config";
import { $http } from "../../utils/http";
import {onReachBottom,onPullDownRefresh} from '@dcloudio/uni-app'
const list = ref([])
let page = 1
const bcid = ref(1)  //记录菜单选中的分类id
const fetchData = ()=>{
	cakeGet(page,bcid.value).then(res=>{
		uni.stopPullDownRefresh()
		let {results} = res.data
		if(results.length){
			list.value = [
				...list.value,
				...results
			]
			page++
		}else{
			uni.showToast({
				title:'没有更多了',
				icon:'none'
			})
		}
	})
}
fetchData() //加载首屏数据
onReachBottom(()=>{
	fetchData()
})

onPullDownRefresh(()=>{
	console.log('下拉刷新');
	list.value = []
	page = 1
	fetchData()
})

// 菜单
const tabArr = [
	{title:'蛋糕',bcid:1},
	{title:'面包',bcid:11},
	{title:'小食',bcid:6},
	{title:'配件',bcid:5},
]
const tabIdx = ref(0)
const onTab = (idx)=>{
	tabIdx.value = idx
	bcid.value = tabArr[idx].bcid
	page=1
	list.value = []
	fetchData()
}
</script>

<style lang="scss">
.cake-list{
	padding: 15upx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.cake-item{
		width: 353upx;
	}
	image{
		width: 100%;
		height: 353upx;
	}
	
}
// .tab-item{
// 	border-right: 1px solid #d8d8d8;
// 	width: 25%;
// 	&:last-of-type{
// 		border: none;
// 	}
// }

.tab-item{
	width: 25%;
	position: relative;
	&::after{
		content: '';
		height: 30upx;
		width: 1upx;
		background-color: red;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%) scaleX(0.5);
		
	}
	&:last-of-type::after{
		width: 0;
	}
}
</style>
